<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="navbar-content">
        <view class="left-section" @tap="goBack">
          <image
            src="/static/icons/left_arrow.png"
            class="back-icon"
            mode="aspectFit"
          ></image>
        </view>
        <text class="navbar-title">编辑公司信息</text>
        <text class="save-btn" @tap="saveProfile">保存</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 绑定公司信息 -->
      <view class="content-item">
        <view class="company-info-row">
          <view class="company-info">
            <text class="section-title">绑定的公司</text>
            <text class="company-name">{{ companyName }}</text>
          </view>
          <view class="unbind-btn" @tap="goToUnbind">
            <text class="unbind-text">解除绑定</text>
          </view>
        </view>
      </view>

      <!-- 对外展示名称选择 -->
      <view class="content-item">
        <text class="section-title">对外展示名称</text>
        <radio-group @change="selectShowName" class="radio-group">
          <label class="radio-item">
            <radio value="1" :checked="formData.showWhichName === 1" color="#00bdb4" />
            <text class="radio-text"><text class="label-text">姓名</text>({{ realName }})</text>
          </label>
          <label class="radio-item">
            <radio value="2" :checked="formData.showWhichName === 2" color="#00bdb4" />
            <text class="radio-text"><text class="label-text">昵称</text>({{ nickName }})</text>
          </label>
        </radio-group>
        <text class="tip-text">使用真实姓名会提高候选人对您的信赖度</text>
      </view>

      <!-- 公司职务 -->
      <view class="content-item">
        <text class="section-title">我的职位</text>
        <input
          v-model="formData.position"
          placeholder="请输入您的职务"
          class="input"
          maxlength="20"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { getHrInfoApi } from "@/api/user";
import { updateCompanyUserBindInfoApi } from "../../../api/user";

const userStore = useUserStore();

// 公司信息
const companyName = ref("");
const realName = ref("");
const nickName = ref("");

// 表单数据
const formData = ref({
  showWhichName: 1, // 默认选择真实姓名，使用数字1
  position: "",
});

// 选择展示名称
const selectShowName = (e) => {
  formData.value.showWhichName = e.detail.value;
};

// 初始化数据
const initFormData = async () => {
  try {
    // 调用getHrInfoApi获取最新的HR信息
    const hrInfo = await getHrInfoApi();
    console.log('获取到的HR信息:', hrInfo);
    
    if (hrInfo) {
      // 设置公司信息
      companyName.value = hrInfo.companyName || "暂无公司名称";
      realName.value = hrInfo.realName || "暂无真实姓名";
      nickName.value = hrInfo.nickName || "暂无昵称";
      
      // 设置表单数据
      formData.value = {
        showWhichName: hrInfo.showWhichName !== undefined && hrInfo.showWhichName !== null ? hrInfo.showWhichName : 1,
        position: hrInfo.position || "",
      };
      console.log(formData.value);
      
    }
  } catch (error) {
    console.error('获取HR信息失败:', error);
    // 如果API调用失败，回退到使用store中的数据
    const userInfo = userStore.userInfo;
    if (userInfo) {
      companyName.value = userInfo.companyName || "暂无公司名称";
      realName.value = userInfo.realName || "暂无真实姓名";
      nickName.value = userInfo.nickName || "暂无昵称";
      
      formData.value = {
        showWhichName: userInfo.showWhichName !== undefined && userInfo.showWhichName !== null ? userInfo.showWhichName : 1,
        position: userInfo.position || "",
      };
    }
  }
};

const goBack = () => {
  uni.navigateBack();
};

const goToUnbind = () => {
  uni.navigateTo({
    url: '/pages/company/hrEdit/unbindCompany'
  });
};

const saveProfile = async () => {
  try {
    uni.showLoading({
      title: "保存中...",
      mask: true,
    });

    // 构建提交数据
    const submitData = {
      userId: userStore.userInfo.id,
      showWhichName: formData.value.showWhichName,
      position: formData.value.position,
    };
    await updateCompanyUserBindInfoApi(submitData);
    uni.hideLoading();
    uni.showToast({
      title: "保存成功",
      icon: "success",
    });
    uni.navigateBack();
    } catch (error) {
      uni.hideLoading();
      uni.showToast({
        title: error.message || "保存失败，请重试",
        icon: "none",
      });
    }
  };

onMounted(async () => {
  await initFormData();
});
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 导航栏 */
.navbar {
  background-color: #fff;
  border-bottom: 1rpx solid #e6e6e6;
  /* 适配安全区域 */
  padding-top: var(--status-bar-height);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 88rpx;
  position: relative;
}

.left-section {
  display: flex;
  align-items: center;
  min-width: 80rpx;
  padding: 20rpx 0;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.save-btn {
  font-size: 32rpx;
  color: #00bdb4;
  z-index: 10;
  min-width: 80rpx;
  text-align: right;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 20rpx 20rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.content-item {
  padding: 40rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  width: 100%;
  box-sizing: border-box;
}

.content-item:last-child {
  border-bottom: none;
}



.section-title {
  font-size: 36rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 20rpx;
  display: block;
}

.input {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
  padding: 16rpx 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
}

/* 单选按钮样式 */
.radio-group {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  width: 100%;
  box-sizing: border-box;
}

.radio-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 16rpx;
}

.label-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

/* 提示文字样式 */
.tip-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
  line-height: 1.4;
}

.company-name {
  font-size: 32rpx;
  color: #00bdb4;
  font-weight: 500;
  display: block;
}

/* 公司信息行样式 */
.company-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.company-info {
  flex: 1;
}

.unbind-btn {
  padding: 16rpx 24rpx;
  border: 2rpx solid #ff6b6b;
  border-radius: 8rpx;
  background-color: #fff;
}

.unbind-text {
  font-size: 28rpx;
  color: #ff6b6b;
  font-weight: 500;
}
</style>
